Tutorial: WMC-SDK for Playback

WMC-SDK for Playback

Initial Html Layout

Create a video element somewhere in your html. For our purposes, make sure the controls attribute is present.

<div id="player_container">
    <video id="video_element" poster="poster.svg" crossOrigin></video>
    <div id="subtitle_element"></div>
</div>

Add wmc.prod.js to the end of the head.

<head>
    ...
    <script src="wmc.prod.js"></script>
</head>

Initialize WMC-SDK by creating the media player

// Creating the AmcManager instance from amc module
var wmcMgr = new amc.AmcManager();
var wmcEvents = amc.AmcEvents;
var wmcConstants = amc.AmcConstants;
// Setup the logger level to DEBUG
wmcPlayer.setLogLevel(wmcConstants.IMC_LOG_DEBUG);

Define Video and Subtitle HTML-DOM elements

var video = document.getElementById("video_element");
var subtitle = document.getElementById("subtitle_element");

Register the basic playback events

wmcMgr.addEventListener(wmcEvents.AMC_EVENT_ERROR, processEvent);
wmcMgr.addEventListener(wmcEvents.AMC_EVENT_STATE_CHANGED, processEvent);
wmcMgr.addEventListener(wmcEvents.AMC_EVENT_VIDEO_POSITION_CHANGED, processEvent);
wmcMgr.addEventListener(wmcEvents.AMC_EVENT_SEEK_COMPLETE, processEvent);
wmcMgr.addEventListener(wmcEvents.AMC_EVENT_DEVICE_REGISTERED, processEvent);
wmcMgr.addEventListener(wmcEvents.AMC_EVENT_INIT_COMPLETE, processEvent);
wmcMgr.addEventListener(wmcEvents.AMC_EVENT_PLAY_READY, processEvent);

Processing the Events

function processEvent(eventObj) {
    switch (eventObj.eventType) {
        case wmcEvents.AMC_EVENT_PLAY_READY:
            //setup the video and subtitle containers
            wmcMgr.setContainer(video, subtitle);
            // initialize the playback with given parameters to be followed by events AMC_EVENT_DEVICE_REGISTERED (first time) and AMC_EVENT_INIT_COMPLETE ( 2nd time onwards)
            wmcMgr.start();
            break;
        case wmcEvents.AMC_EVENT_DEVICE_REGISTERED:
        case wmcEvents.AMC_EVENT_INIT_COMPLETE:
            // Passing player key and analytics key
            //wmcMgr.setPlayerKey("xxxxxx-xxxxxx-xxxxxxx");
            //wmcMgr.setAnalyticsConfig("xxxxxx-xxxxxx-xxxxxxx", "dummy@abc.com", "LIVE$4346", "Dummy Test Channel");
            // start the VOD/LIVE playback
            wmcMgr.createPlayer(wmcConstants.IMC_MODE_VOD);
            break;
        case wmcEvents.AMC_EVENT_ERROR:
            console.error(eventObj.code + ":" + ((eventObj.message) ? eventObj.message : eventObj.message.error));
            break;
        default:
    }
}

Set Playback URL and start AmcManager

// setExternalSourceParams() is an api which is needed only when external source is added in to the WMC SDK.
// This API has only one mandatory parameter, name :sourceUrl, other optional parameter is licenseUrl, which is needed for encrypted content.
wmcMgr.setExternalSourceParams({ sourceUrl: "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd", licenseUrl: "" });
// Initializes the WMC SDK, to be followed by event AMC_EVENT_PLAY_READY
wmcMgr.init();

Final HTML Layout

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WMC-SDK Player</title>
    <!-- Setting the source for WMC-SDK from npm Private MK Repository -->
    <script src="node_modules/@mediakind/wmc/dist/wmc.prod.js"></script>
</head>

<body>
    <div id="player_container">
        <video style="width: 100%;height: 100%;" id="video_element" poster="" crossOrigin controls></video>
        <div id="subtitle_element"></div>
    </div>
    <script src="script/main.js"></script>
</body>

</html>